<div class="tpl-portlet-components" xmlns:th="http://www.thymeleaf.org">
    <div class="portlet-title">
        <div class="caption font-green bold">
            保存电影
        </div>
        <div class="tpl-portlet-input tpl-fz-ml">
            <div class="portlet-input input-small input-inline">
                <div class="input-icon right">
                    <i class="am-icon-search"></i>
                    <input type="text" class="form-control form-control-solid" placeholder="搜索..."></div>
            </div>
        </div>
    </div>
    <div class="tpl-block ">
        <div class="am-g tpl-amazeui-form">
            <div class="am-u-sm-12 am-u-md-9">
                <form class="am-form am-form-horizontal" name="movieForm" id="movieFormId">
                    <input type="hidden" name="id" th:value="${adminMovieVO==null?'':adminMovieVO.id}" id="movieId">
                    <div class="am-form-group">
                        <label for="name" class="am-u-sm-3 am-form-label">电影名称 / MovieName</label>
                        <div class="am-u-sm-9">
                            <input type="text" name="name" id="name" placeholder="用户昵称"
                                   th:value="${adminMovieVO == null? '测试电影' : adminMovieVO.name}">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label name="movieType" class="am-u-sm-3 am-form-label">类型 / MovieType <span
                                class="tpl-form-line-small-title">Author</span></label>
                        <div class="am-u-sm-9">
                            <select data-am-selected="{searchBox: 1}" name="typeId">
                                <option th:each="movieType :${movieTypeList}"
                                        th:value="${movieType.id}"
                                        th:text="${movieType.typeName}"
                                        th:selected="${adminMovieVO == null ? false : movieType.id == adminMovieVO.typeId}">
                                    MovieType
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="rate" class="am-u-sm-3 am-form-label">电影评分 / Rate</label>
                        <div class="am-u-sm-9">
                            <input type="number" min="0" max="10" name="rate" id="rate" placeholder="用户昵称"
                                   th:value="${adminMovieVO == null? '9.3' : adminMovieVO.rate}">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="directors" class="am-u-sm-3 am-form-label">导演 / Directors</label>
                        <div class="am-u-sm-9">
                            <input type="text" name="directors" id="directors" placeholder="导演"
                                   th:value="${adminMovieVO == null? '王晶/李安/张艺谋' : adminMovieVO.directors}">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="actors" class="am-u-sm-3 am-form-label">主演 / Actors</label>
                        <div class="am-u-sm-9">
                            <input type="text" name="actors" id="actors" placeholder="主演"
                                   th:value="${adminMovieVO == null? '大卫贝尔/彭于晏' : adminMovieVO.actors}">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label name="movieLanguage" class="am-u-sm-3 am-form-label">语言 <span
                                class="tpl-form-line-small-title">Language</span></label>
                        <div class="am-u-sm-9">
                            <select data-am-selected="{searchBox: 1}" name="languageId">
                                <option th:each="movieLanguae :${movieLanguageList}"
                                        th:value="${movieLanguae.id}"
                                        th:text="${movieLanguae.language}"
                                        th:selected="${adminMovieVO == null ? false : movieLanguae.id == adminMovieVO.languageId}">
                                    Language
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="initialReleaseDate" class="am-u-sm-3 am-form-label">上映日期 /
                            InitialReleaseDate</label>
                        <div class="am-u-sm-9">
                            <input type="date" name="initialReleaseDate" id="initialReleaseDate" placeholder="上映日期"
                                   th:value="${adminMovieVO == null ? '2018-01-01': #dates.format(adminMovieVO.initialReleaseDate,'yyyy-MM-dd')}">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="location" class="am-u-sm-3 am-form-label">地区 / Location</label>
                        <div class="am-u-sm-9">
                            <input type="text" name="location" id="location" placeholder="主演"
                                   th:value="${adminMovieVO == null? 'jack' : adminMovieVO.location}">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="duration" class="am-u-sm-3 am-form-label">片长 / Location</label>
                        <div class="am-u-sm-9">
                            <input type="text" name="duration" id="duration" placeholder="主演"
                                   th:value="${adminMovieVO == null? '1小时50分钟' : adminMovieVO.duration}">
                        </div>
                    </div>

                    <div class="am-form-group">
                        <label for="description" class="am-u-sm-3 am-form-label">电影描述 / Description</label>
                        <div class="am-u-sm-9">
                            <textarea type="text" name="description" id="description"
                                      placeholder="人物描述">description </textarea>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-3 am-form-label">电影封面 <span
                                class="tpl-form-line-small-title">Movie Covers</span></label>
                        <div class="am-u-sm-9">
                            <div class="am-form-group am-form-file">
                                <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                    <i class="am-icon-cloud-upload"></i> 添加封面
                                </button>
                                <input type="hidden" name="imageFileName" th:value="${adminMovieVO==null?'default.jpg':adminMovieVO.imageFileName}">
                                <input id="imageFile" type="file">
                                <span id="imageFileName" style="color: red"></span>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-3 am-form-label">电影文件<span
                                class="tpl-form-line-small-title">Movie File</span></label>
                        <div class="am-u-sm-9">
                            <div class="am-form-group am-form-file">
                                <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                    <i class="am-icon-cloud-upload"></i> 添加视频文件
                                </button>
                                <input type="hidden" name="videoFileName" th:value="${adminMovieVO==null?'default.mp4':adminMovieVO.videoFileName}">
                                <input id="videoFile" type="file">
                                <span id="videoFileName" style="color: red"></span>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <div class="am-u-sm-9 am-u-sm-push-3">
                            <button type="button" onclick="saveMovie()" class="am-btn am-btn-primary">保存电影信息</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    //添加图片文件选择事件
    $('#imageFile').on('change', function() {
        $.each(this.files, function() {
            $("#imageFileName").text(this.name);
        });
    });
    //添加视频文件选择事件
    $('#videoFile').on('change', function() {
        $.each(this.files, function() {
            $("#videoFileName").text(this.name);
        });
    });
</script>